<script setup>
import { color } from "echarts";
import { ref } from "vue";

const option = ref({
  // color:["#964036","#aa9649","#0108635","#b04552","#79836c","#3d8e86","#d1d8c0"],
  title: {
    text: "各朝代四方面总和占比", // 修改标题
    left: "center",
    textStyle: {
      color: "#2c3e50",
      fontSize: 18,
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {c} ({d}%)",
  },
  //   legend: {
  //     data: [
  //       "科学成就",
  //       "科学家",
  //       "科学著作",
  //       "优秀文化",
  //       "元朝",
  //       "唐朝",
  //       "明朝",
  //       "汉朝",
  //       "秦朝",
  //       "宋朝",
  //       "先秦",
  //       "三国",
  //       "两晋",
  //       "南北朝",
  //       "五代十国",
  //       "隋朝",
  //       "清朝"
  //     ],
  //   },
  series: [
    {
      color: ["#B7C2D4", "#BAC7C0", "#EED9BA", "#EDD2C9"],
      //   top: 50,
      name: "总和占比",
      type: "pie",
      selectedMode: "single",
      radius: ["5%", "35%"],
      label: {
        position: "inner",
        fontSize: 12,
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 2860, name: "优秀文化" }, // 诗词、书画、哲学等
        { value: 1740, name: "科学成就" }, // 重大发明、技术突破
        { value: 890, name: "科学著作" }, // 专著文献
        { value: 650, name: "科学家" }, // 知名科学家
      ],
    },
    {
      color: [
        "#D7AFAD",
        "#D3DFED",
        "#E5CDDD",
        "#C7BED3",
        "#E4E1C2",
        "#738BAD",
        "#85A397",
        "#E1B882",
        "#D9A89A",
        "#B67271",
        "#B1C6E1",
        "#D2A1BF",
        "#9D8DB2",
      ],

      //   top: 50,
      name: "总和占比",
      type: "pie",
      selectedMode: "single",

      radius: ["50%", "68%"],
      labelLine: {
        length: 30,
      },

      data: [
        { value: 180, name: "先秦" }, // 诸子百家典籍
        { value: 60, name: "秦朝" }, // 统一度量衡等
        { value: 320, name: "汉朝" }, // 造纸术、天文历法
        { value: 90, name: "三国" }, // 机械制造（诸葛亮）
        { value: 150, name: "两晋" }, // 地理学（《水经注》）
        { value: 130, name: "南北朝" }, // 数学（祖冲之）
        { value: 80, name: "隋朝" }, // 大运河相关技术
        { value: 620, name: "唐朝" }, // 天文历法、文学高峰
        { value: 100, name: "五代十国" }, // 印刷术发展
        { value: 980, name: "宋朝" }, // 四大发明两项、沈括
        { value: 410, name: "元朝" }, // 天文学、航海技术
        { value: 860, name: "明朝" }, // 《天工开物》等专著
        { value: 750, name: "清朝" }, // 考据学、传统技术集成
      ],
    },
  ],
});
</script>

<template>
  <!-- 主页面的饼图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
